<template>
    <z-paging
        ref="paging"
        :refresher-out-rate="0.8"
        :show-empty-view-reload-when-error="false"
        :empty-view-img-style="{ width: '308rpx', height: '308rpx' }"
        empty-view-error-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/1c53b8aed0c74201bb092265803a1d48.png"
        empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
        empty-view-error-text="暂无数据"
        safe-area-inset-bottom
        bg-color="#F5F8FE"
        v-model="dataList"
        @query="queryList"
    >
        <view class="cellBox">
            <view class="detail" v-for="(item, index) in dataList" :key="index">
                <view class="detail_title flex_wrap row_between row_middle">
                    <view class="flex_wrap row_middle">
                        <u-icon
                            name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/29/86b80f98641d4c05ae048e4d466c2da5.png"
                            size="84rpx"
                        />
                        <view class="">
                            <u-text
                                :text="`${item.ledCouponManName || '微信用户'} ${
                                    item.ledCouponManPhone || ''
                                }`"
                                size="32rpx"
                                color="#333"
                                margin="0 16rpx 20rpx 20rpx"
                            />
                            <view
                                class="flex_wrap row_between"
                                style="width: 550rpx"
                            >
                                <view
                                    ><u-text
                                        :text="
                                            `已激活：` +
                                            `${item.ledUseNumber}`
                                        "
                                        size="24rpx"
                                        color="#666"
                                        margin="0 0 0 20rpx"
                                    />
                                </view>
                                <view
                                    ><u-text
                                        :text="
                                            `未激活：` +
                                            `${item.ledTotal-item.ledUseNumber}`
                                        "
                                        size="24rpx"
                                        color="#666"
                                        margin="0 0 0 20rpx"
                                    />
                                </view>
                                <view>
                                    <u-text
                                        :text="`总数：${item.ledTotal}`"
                                        size="24rpx"
                                        color="#FF721B"
                                        align="right"
                                    />
                                </view>
                            </view>
                        </view>
                    </view>
                    <view
                        class="cardbg"
                        :style="{ background: statusBg[item.ledExtType] }"
                        >{{ item.ledExtType }}卡</view
                    >
                </view>
                <view class="timeBox"
                    ><u-text
                        :text="`转发时间：` + `${item.ledCreateTime}`"
                        size="24rpx"
                        color="#666"
                        margin="0 0 0 20rpx"
                    />
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script>
import { mapGetters } from "vuex";
import { cardPack } from "@/api/card";
import {
		getTransferList,
	} from "@/api/coupon.js";
export default {
    data() {
        return {
            statusBg: {
                A: "#1682FF",
                B: "#14C9C9",
                C: "#FFB521",
                D: "#8F94ED",
                E: "#3AAB21",
            },

            dataList: [],
        };
    },
    computed: {
        ...mapGetters(["isLogin", "phone"]),
    },
    methods: {
        async queryList(pageNo, pageSize) {
            let params1 = {
                pageNum: pageNo,
                pageSize: pageSize,
				cardPackType : 2
            };
            let result = await getTransferList(params1);
            result.code === 200 &&
                this.$refs.paging.completeByTotal(
                    result.data.rows,
                    result.total
                );
        },
    },
};
</script>

<style lang="scss" scoped>
.topTabbar {
    background-color: #fff;
    padding-bottom: 16rpx;
}
.scanLine {
    width: 0rpx;
    height: 26rpx;
    border: 2rpx solid #d8d8d8;
}
.cellBox {
    width: 92vw;
    margin: 0 auto;

    ::v-deep .u-cell {
        box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.08);
        margin-top: 30rpx;
        border-radius: 20upx;
    }

    ::v-deep .u-cell__body {
    }
}
.timeBox {
    padding: 18rpx 30rpx;
    border-top: 1px solid #f7f7f7;
}
.detail {
    width: 100%;
    box-sizing: border-box;
    border-radius: 20rpx;
    margin-top: 32rpx;
    background: #ffffff;

    &_title {
        width: 100%;
        padding: 26rpx 28rpx;
        box-sizing: border-box;
        position: relative;
    }
    &_title1 {
        width: 100%;
        padding: 18rpx;
        box-sizing: border-box;
        position: relative;
    }
}
.cardbg {
    position: absolute;
    top: 0rpx;
    right: 0rpx;
    width: 120rpx;
    border-radius: 0rpx 28rpx 0 28rpx;
    height: 48rpx;
    text-align: center;
    line-height: 48rpx;
    font-size: 36rpx;
    color: #ffffff;
}
.scanning_code {
    width: 144rpx;
    padding-right: 52rpx;
}

.btnBox {
    background: #1682ff;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    color: #ffffff;
    font-size: 30rpx;
    padding: 6rpx 40rpx;
    position: relative;
    bottom: 20rpx;
}
.bottom {
    width: 100%;
    height: 160rpx;
    padding-top: 16rpx;
    background-color: #fff;
}
.tongjiBox {
    width: 100%;
    height: 170rpx;
    background: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/24/ce9404cf4ba14c1499d63c41543944a9.png")
        no-repeat;
    background-size: contain;
    view {
        flex: 1;
    }
}
</style>
